<template>
  <div>
    <div class="weui-flex  bdl xl primary pdh">
      <div class="weui-flex__item">选择dddd教材</div>
    </div>
    <div class="pd-l">
      <div class="weui-flex bs pd br" @tap="handleCourseSelect">
        <div class="weui-flex__item">{{selectCourse.name || '请选择课程'}}</div>
        <div><i class="if icon-right"></i></div>
      </div>
    </div>
    <div class="pdh-l">
      <div v-if="unitDisplayMode == 'UNIT'">
        <div class="unit bd-b pdv weui-flex" v-for="n in units" :key="n.id" @tap="handleToggleUnit(n.id)">
          <div class="weui-flex__item">{{n.name}}</div>
          <div>
            <input type="checkbox" :checked="n.checked">
          </div>
        </div>
      </div>
      <div v-if="unitDisplayMode == 'LESSON'" >
        <div class="unit mgb" v-for="(n, i) in units" :key="n.id">
          <div class="_hd c-gray">{{n.name}}</div>
          <div class="pdl">
            <div v-for="(nn, ii) in n.lessons" class="pdv bd-b weui-flex" @tap="handleToggleLesson(nn.id)">
              <div class="weui-flex__item">{{nn.name}}</div>
              <div><input type="checkbox" :checked="nn.checked"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {mapState, mapActions, mapGetters} from 'vuex'
import pop from '../../components/pop'
import cbx from '../../components/cbx'
import dlg from '../../components/dlg'
export default {
  data () {
    return {
      a: true
    }
  },
  components: {
    dlg
  },
  computed: {
    ...mapState('task-create-select-group', [
      'isSelectPanelShow',
      'unitDisplayMode',
    ]),
    ...mapGetters('task-create-select-group', [
      'units',
    ]),
    ...mapState('course-select', [
      'currentCourseId'
    ]),
    ...mapGetters('course-select', [
      'selectCourse',
    ])
  },
  mounted () {
    // this.$store.commit('course-select/update_current_course_id', 1125)
  },
  methods: {
    ...mapActions('task-create-select-group', [
      'handleCourseSelect',
      'fetchUnits',
      'handleToggleUnit',
      'handleToggleLesson',
    ])
  },
  watch: {
    async currentCourseId (nv) {
      if (!nv) return
      try {
        await this.fetchUnits(nv)
      } catch (e) {
        this.$debug({err: e})
      }
    }
  }
}
</script>

<style scoped lang="less">
</style>
